<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">

    <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
    <h1>JavaScript Dom</h1>
    <h2>参考链接</h2>
    <ul>
        <li><a target="_blank" href="https://www.w3school.com.cn/js/js_htmldom_methods.asp">JavaScript - HTML DOM 方法</a></li>
        <li><a target="_blank" href="https://www.w3school.com.cn/js/js_htmldom_document.asp">JavaScript HTML DOM 文档</a></li>
        <li><a target="_blank" href="https://www.w3school.com.cn/js/js_htmldom_elements.asp">JavaScript HTML DOM 元素</a></li>
        <li><a target="_blank" href="https://www.w3school.com.cn/js/js_htmldom_events.asp">JavaScript HTML DOM 事件</a></li>
    </ul>

    <h2>摘抄</h2>
    <p>Dom 属性是您能够获取或设置的值（就比如改变 HTML 元素的内容）。</p>
    <p>Dom 方法是您能够完成的动作（比如添加或删除 HTML 元素）。</p>


    <h3>document 对象</h3>

    <ul>
        <li>
            <strong>查找 HTML 元素</strong>

            <ul>
                <li><strong>document.getElementById(id)</strong>通过元素 id 来查找元素</li>
                <li><strong>document.getElementsByTagName(name)</strong>通过标签名来查找元素</li>
                <li><strong>document.getElementsByClassName(name)</strong>通过类名来查找元素</li>
            </ul>
        </li>
        <li>
            <strong>改变 HTML 元素</strong>

            <ul>
                <li><strong>element.innerHTML = new html content</strong>改变元素的 inner HTML</li>
                <li><strong>element.attribute = new value</strong>改变 HTML 元素的属性值</li>
                <li><strong>element.setAttribute(attribute, value)</strong>改变 HTML 元素的属性值</li>
                <li><strong>element.style.property = new style</strong>改变 HTML 元素的样式</li>
            </ul>
        </li>
        <li>
            <strong>添加和删除元素</strong>

            <ul>
                <li><strong>document.createElement(element)</strong>创建 HTML 元素</li>
                <li><strong>document.removeChild(element)</strong>删除 HTML 元素</li>
                <li><strong>document.appendChild(element)</strong>添加 HTML 元素</li>
                <li><strong>document.replaceChild(element)</strong>替换 HTML 元素</li>
            </ul>
        </li>
    </ul>
    <h3>DOM 事件</h3>
    
    <h4>onclick</h4>
    <p>为元素添加点击事件</p>
    <pre>
&lt;button onclick=&quot;displayDate()&quot;&gt;试一试&lt;/button&gt;

// 或者
&lt;script&gt;
    document.getElementById(&quot;myBtn&quot;).onclick = displayDate;
&lt;/script&gt; 
    </pre>

    <h4>onload 和 onunload 事件</h4>
    <p>当用户进入后及离开页面时，会触发 onload 和 onunload 事件。</p>
    <pre>
&lt;body onload=&quot;checkCookies()&quot;&gt;&lt;/body&gt;
    </pre>


    <h4>onchange 事件</h4>
    <p>onchange 事件经常与输入字段验证结合使用。</p>
    <pre>
&lt;input type=&quot;text&quot; id=&quot;fname&quot; onchange=&quot;upperCase()&quot;&gt;
    </pre>

</body>

</html>